{% extends "_layouts/examples.html" %}
{% block title %}Forms / Range input{% endblock %}

{% block standalone_css %}base{% endblock %}

{% block content %}
<input type="range" min="0" max="100" value="50" step="1" aria-label="Enabled Range example"/>
<input type="range" min="0" max="100" value="50" step="1" disabled aria-label="Disabled Range Example" />

<script>
var isWebkit =
  /Chrome/i.test(navigator.userAgent) || /Safari/i.test(navigator.userAgent);
var PROGRESS_COLOUR = 'var(--vf-color-link-default)';
var EMPTY_COLOUR = 'var(--vf-color-border-default)';

/**
 Renders gradient to fake progress color in webkit browsers.
 @param {HTMLElement} slider Slider element to render background on.
*/
function renderSlider(slider) {
  if (isWebkit) {
    var value = (slider.value - slider.min) / (slider.max - slider.min);
    slider.style.backgroundImage = (
      '-webkit-gradient(linear, left top, right top, color-stop('
      + value + ', ' + PROGRESS_COLOUR + '), color-stop('
      + value + ', ' + EMPTY_COLOUR + '))'
    );
  }
}

/**
  Attaches change listener to sliders to update their background color.
  @param {HTMLElement} slider Slider element to render background on.
*/
function initSlider(slider) {
  renderSlider(slider);

  slider.addEventListener('input', function() {
    renderSlider(slider);
  });
}

// Fix for Chrome and Safari as they don't support CSS slider progress
if (isWebkit) {
  // Setup all sliders on the page.
  var sliders = document.querySelectorAll('input[type=range]');

  for (var i = 0, l = sliders.length; i < l; i++) {
    initSlider(sliders[i]);
  }
}
</script>
{% endblock %}
